<template>
 <div class="main clearfix">
   <div class="sign f_l" v-for="(item,index) in signList" :key="item.sign_id" style="width: 50%;margin-bottom: 20px">
     <Row >
       <i-col span="11">
         <Card >
           <p slot="title">{{item.title}}</p>
           <p>签到描述：{{item.desc}}</p>
           <p>签到开始时间：{{item.start_time | toDateString }}</p>
           <p>签到结束时间：{{item.end_time | toDateString }}</p>
            <div>
              <p>签到协议：{{item.protocol}}</p>
            </div>
            <p>签到备注：{{item.remake}}</p>
           <p style="margin-top: 20px;display: flex;width: 100%;justify-content: space-around">
             <i-button type="info" shape="circle"  @click="qrCode(index)">扫码签到</i-button>
             <i-button type="info" shape="circle"  @click="exportTable(index)" >导出签到表</i-button>
             <i-button type="error" shape="circle" @click="deleteSign(index)" >删除</i-button>
           </p>
         </Card>
       </i-col>
     </Row>
   </div>
   <Modal v-model="isCode" width="600"
          title="使用手机扫码进行签到"
   >
      <div style="width: 600px;display: flex;justify-content: center">
        <div id="qrCode" ref="qrCodeDiv"></div>
      </div>
   </Modal>
 </div>
</template>

<script>
import api from '../../api/index.js'
import {mapState} from 'vuex'
import QRCode from 'qrcodejs2';
  export default {
    name:'departmentList',
    props:{},
    data () {
      return {
          signList:[],
          isCode:false,
      }
    },
    computed:{
      ...mapState([
        'user',
      ])
    },
    filters:{
      toDateString: (date)=>{
        let d  = new Date(date);
        let y  = d.getFullYear();
        let m = d.getMonth()+1;
        let day = d.getDate();
        let h = d.getUTCHours();
        let min = d.getUTCMinutes();
        return `${y}年-${m}月-${day}日-${h}时-${min}分`;
      }
    },
    mounted() {
      api.getSignListByCreater(this.user.user_number).then(res=>{
        if(res.status==1){
          this.signList=res.data;
          console.log(res.data);
        }
      })
    },
    methods: {
      openCode(){
        console.log(1);
      },
      deleteSign(index){
        api.deleteSignById(this.signList[index].sign_id).then(res=>{
          if(res.status==1){
            this.$Message.success('你已经成功删除该签到');
            //本地数据删除
            this.signList.splice(index,1);
          }
        })
      },
      //导出签到表格
      exportTable(index){
        api.exportExcelById(this.signList[index].sign_id);
      },
      //二维码初始配置
      bindQRCode: function (user_id,sign_id) {
        this.$refs.qrCodeDiv.innerHTML=''; //清空之前的二维码
        new QRCode(this.$refs.qrCodeDiv, {
          text: `http:localhost:3000/#/qrcode?signID=${sign_id}`,  //挂在服务器时 采用服务器端口
          width: 200,
          height: 200,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })
      },
      //打开二维码签到
      qrCode(index){
        console.log(index);
        this.isCode=true;
        this.bindQRCode(this.user.user_id,this.signList[index].sign_id);
      },
    },
  }
</script>
<style lang='' scoped>
  .f_r{
    float: right;
  }
  .f_l{
    float: left;
  }
  .clearfix:after{
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }
  .clearfix{
    zoom: 1;/*兼容IE游览器*/
  }
</style>
